<script setup lang="ts">
import { ref } from 'vue'
type Obj = {
  name: string
  isShow: boolean
}
const input = ref<string>('')
const list = ref<Obj[]>([])
const newList = ref<Obj[]>([])
const shuffle = (arr: Obj[]) => {
  for (let i = 0; i < arr.length; i++) {
    const randomIndex = Math.round(Math.random() * (arr.length - 1 - i)) + i
    ;[arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]]
  }
  return arr
}
// 随机打乱数组 10次
const randomArr = () => {
  if (list.value.length < 9) return alert('候选项不足9个')
  newList.value = [...list.value]
  for (let index = 0; index < 10; index++) {
    shuffle(newList.value)
  }
}
// 添加候选项
const addItem = () => {
  if (!input.value) return alert('内容不能为空')
  list.value.push({ name: input.value, isShow: true })
  input.value = ''
}
// 显示奖项
const changeShow = (index: number) => {
  newList.value[index].isShow = false
}
// 移出后选型
const handleClose = (item1: string) => {
  list.value = list.value.filter((item) => item.name !== item1)
  newList.value = []
}
</script>

<template>
  <div class="box">
    <div class="big-page">
      <el-input
        v-model="input"
        placeholder="请输入名称"
        class="input"
        :disabled="list.length >= 9"
      />
      <el-button type="primary" @click="addItem()" :disabled="list.length >= 9"
        >添加</el-button
      >
      <el-button type="primary" @click="randomArr()">随机打乱数组</el-button>
    </div>
    <h4>候选项</h4>
    <div class="tag">
      <el-tag
        v-for="item in list"
        closable
        @close="handleClose(item.name)"
        :key="item.name"
        >{{ item.name }}</el-tag
      >
    </div>
    <div class="item">
      <div
        class="item-list"
        v-for="(item, index) in newList"
        :key="index"
        :class="{ active: item.isShow }"
        @click="changeShow(index)"
      >
        <p>{{ item.isShow === false ? item.name : '' }}</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  margin: 0 auto;
  width: 1000px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 0;
}
.big-page {
  margin-top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-input {
    width: 600px;
  }
}
.item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  width: 360px;

  .item-list {
    margin: 10px;
    width: 100px;
    height: 100px;
    background-color: skyblue;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    p {
      margin: 0;
      color: yellow;
    }
  }
}
.active {
  width: 100px;
  height: 100px;
  background-color: yellow !important;
  // box-sizing: border-box;
}

.tag {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  align-items: center;
  .el-tag {
    margin: 5px;
  }
}
</style>
